import React, { useMemo, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { ProductCard, Tag, Button } from 'react-vant';
import { NavBar } from 'antd-mobile'
import styles from './xuan.module.css'
import { } from '../../App.css'
//selected 是已选，booked 是预选 ，available 是可选
function Xuan() {
    const Navigate = useNavigate()
    const { state } = useLocation()
    const price = 140
    const yes = (state)=>{
        Navigate('/order',{state:state})
    }
    // console.log(state)
    const initSeatdata = Array.from({ length: 50 }, (_, index) => {
        return {
            id: `D${index + 1}`,
            status: index == 1 || index == 2 || index == 48 || index == 49
                ? 'selected'
                : index % 3 == 0
                    ? 'booked'
                    : 'available'
        }
    })
    // console.log(initSeatdata)
    const [seatData, setSeatData] = useState(initSeatdata)
    const seatList = (id) => {
        setSeatData((prev) => {
            return prev.map((item) => {
                if (item.id == id && item.status !== 'booked') {
                    return {
                        ...item,
                        status: item.status == 'selected' ? 'avaliable' : 'selected'
                    }
                }
                return item
            })
        })
    }
    const getselected = useMemo(() => {
        return seatData.filter((item) => item.status == 'selected')
    }, [seatData])
    return (
        <div>
            <NavBar onBack={() => Navigate(-1)}>我要预定</NavBar>
            <ProductCard
                footer={state.date}
                desc="Merusyed SDK"
                title={state.title}
                thumb={state.image}
                currency={false}
                decimal={false}
                price='182参与者'
            />
            <div className={styles.price_css}>￥{state.price}</div>
            <div>
                <h3 style={{ padding: '25px' }}>选择位置</h3>
                <div className='seatdata'>
                    {
                        seatData.map((item, ind) => {
                            return <div onClick={() => seatList(item.id)} key={ind} className={`seat-item seat-item-${item.status}`}>
                                {item.status == 'selected' && <b>{item.id}</b>}
                            </div>
                        })
                    }
                </div>
                <div className='lenag'>
                    <div className='lenag-item'>
                        <span className='item-dont dont-selected'></span><p>已选</p>
                    </div>
                    <div className='lenag-item'>
                        <span className='item-dont dont-booked'></span><p>预选</p>
                    </div>
                    <div className='lenag-item'>
                        <span className='item-dont dont-available'></span><p>可选</p>
                    </div>
                </div>
                <div className='seat-data'>
                    <span>已选:{getselected.length}座</span>
                    <b>{getselected.map((item) => item.id).join(',')}</b>
                </div>
                <div className='price_css'>
                    <p className='zong'>总价:</p><span className='price'>￥{getselected.length * price.toFixed(2)}</span>
                </div>
            </div>
            <Button onClick={() => yes(state)} style={{
                width: '350px', height: '50px', marginLeft: '13px',
                color: '#fff', background: 'rgba(111, 13, 141, 0.87)', borderRadius: '40px'
            }}>立即预定</Button>
        </div>
    )
}

export default Xuan
